<template>
	<div>
		<table class="gridtable" >
			<tr>
				<th v-for="h in tableConfig.header">{{h.text}}</th>
			</tr>
			<tr v-for="item in json_data">
				<td v-for="i in tableConfig.header">
					{{item[i.column]}}
				</td>
				
			</tr>
				
			
		</table>
		<ul v-if="tableConfig.pageIng" v-for="(item ,i) in pageArrer">
	    	<li @click="clickPage(i)" :class="{active:i==cuActive}">{{i+1}}</li>
	    </ul>
    </div>
</template>

<script>
	
	
	
	export default{
		
		data(){
			return{
				pageAll:22,
				pageArrer:[],
				json_data:[],
				cuActive:0
				
			}
			
		},
		props:[
			'tableConfig'
		],
		
		mounted(){
			this.runderPaging()
			this.getCustomers()
			
		},
		methods:{
			
						
			
			getCustomers() {
				let params={
					_page:this.cuActive+1,
					_limit:this.tableConfig.limit
				}
				this.$http.get(this.tableConfig.apiUrl,{params})
					.then((response) => {
						this.json_data=response.data
						this.pageIng&&this.runderPaging()
						
					})
					.catch(function(response) {
						alert("请求错误");
					})
			},
			runderPaging(){
				
			  	this.page=Math.ceil(this.pageAll/this.tableConfig.limit);
			  	this.pageArrer=new Array(this.page).fill(0);
			  	console.log(this.pageArrer);
			},
			clickPage(page){
				console.log(page)
				this.cuActive=page;
				this.getCustomers();
				
				
				
			}
			
			
		}
		
		
	}
	
</script>

<style>
	*{
		margin: 0;
		padding: 0;
	}
	table.gridtable {
		font-family: verdana,arial,sans-serif;
		font-size:11px;
		color:#333333;
		border-width: 1px;
		border-color: #666666;
		border-collapse: collapse;
		width: 100%;
	}
	table.gridtable th {
		border-width: 1px;
		padding: 8px;
		border-style: solid;
		border-color: #666666;
		background-color: #dedede;
	}
	table.gridtable td {
		border-width: 1px;
		padding: 8px;
		border-style: solid;
		border-color: #666666;
		background-color: #ffffff;
	}
	
</style>